<template>
	<view class="PlayerCardContainer">
		<!-- <view class="bg-color"></view> -->
		<!-- <view class="backgroundimage"></view> -->
		<image class="bg-img" src="../../static/cardBg.png"></image>
		<view class="content">
			<view class="textInfo">
				<text class="styleF1">{{Text1}}\n</text>
				<text class="styleF2">{{Text2}}</text>
			</view>
			<view>
				<img class="insert" :src="begin"></img>
			</view>
			<view class="buttonStyle">
				<button @click="upLoadImg">点击此处生成你的球星卡</button>
				<button @click="DownLoad">保存至相册</button>
			</view>
		</view>
		<!-- <image class="PlayerCard" :src="avatar" @tap="imgClick"></image> -->
	</view>

</template>

<script>
	export default {
		data() {
			return {
				Text1: "CMF",
				Text2: 93,
				begin: "",
				avatar: "../../static/球员1.png",
				display: "../../static/Display.png"
			}
		},
		methods: {
			upLoadImg() {
				var _this = this;
				uni.chooseImage({
					count: 1,
					sizeType: ['compressed'], //指定类型为压缩过的图片
					sourceType: ['album'],
					success: function(res) {
						console.log(JSON.stringify(res.tempFilePaths));
						_this.begin = res.tempFilePaths[0]
					}
				});
			},
			DownLoad() {
				var self = this;
				uni.saveVideoToPhotosAlbum({
					filePath: "../../static/Display.png",
					success: function() {
						console.log('save success');
					}
				});
				uni.showToast({
					title:"成功",
					icon:'success',
					duration:1500
				})
			}
		},
	}
</script>

<style lang="scss" scoped>
	.bg-color {
		position: fixed;
		width: 100%;
		height: 100%;
		top: 0;
		left: 0;
		background: linear-gradient(#BBE5FD 0%, #D2DAFD 49%, #fff 100%);
		z-index: -1;
	}

	.bg-img {
		position: fixed;
		width: 80%;
		height: 70%;
		top: 0;
		left: 90rpx;
		z-index: -1;
	}

	.insert {
		position: fixed;
		width: 150%;
		height: 80%;
		top: -20rpx;
		left: -125rpx;
		z-index: -1;
	}

	.content {

		.textInfo {
			margin-left: 20rpx;
			font-size: 100rpx;
			color: #ffffff;

			.styleF1 {
				font-family: "Helvetica Neue", Helvetica, Arial, "PingFang SC", "Microsoft YaHei",  sans-serif;
			}
		}

		.buttonStyle {
			margin-top: 950rpx;
			margin-left: 85rpx;
		}
	}
	.styleF2{
		color: lawngreen;
		margin-left:35rpx ;
	}

	.PlayerCardContainer {
		display: flex;
		justify-content: center;
		margin-left: 70rpx;
		height: 300rpx;
		position: absolute;
		top: 50rpx
	}

	.PlayerCard {
		width: 600rpx;
		height: 80vh;
	}

	.viewLevelContainer {
		position: relative;
	}

	.viewLevelButton {
		position: absolute;
		width: 400rpx;
		left: 50%;
		top: 10px;
		transform: translateX(-50%);
	}
</style>